<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('参数设置')" />
</head>
<body class="gray-bg">
<form class="form-horizontal m" id="form-device-edit" action="#" th:action="@{/system/device/submit}" th:object="${myDevice}" method="post"><!--th:object="${myDevice}"-->
        <input name="id"  type="hidden"  th:field="*{id}" />
        <input name="planId" type="hidden"  th:field="*{planId}" id="planId">
        <input name="changeSel" type="hidden" id="changeSel">
        <h4 class="form-header h4" style="text-align: left">当前模式</h4>
        <div class="row">
            <div class="col-sm-12" style="text-align: left">
                <label class="col-sm-4 control-label ">设备运行时间：</label>
                <div class="control-label" style="text-align: left">
                    <span>[[${myDevice.runTime}]]</span>
                </div>
            </div>
        </div>
        <h4 class="form-header h4" style="text-align: left">当前状态:</h4>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">GCMS真空度：</label>
                    <div class="control-label" style="text-align: left">
                        <span>[[${myDevice.p1Now}]]</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">样品仓真空度：</label>
                    <div class="control-label" style="text-align: left">
                        <span>[[${myDevice.p2Now}]]</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">样品仓温度：</label>
                    <div class="control-label" style="text-align: left">
                        <span>[[${myDevice.cangtiH11Now}]]</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">捕集阱前温度：</label>
                    <div class="control-label" style="text-align: left">
                        <span>[[${myDevice.bujijingT41Now}]]</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">捕集阱温度值：</label>
                    <div class="control-label" style="text-align: left">
                        <span>[[${myDevice.bujijingT3Now}]]</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">捕集阱后温度值：</label>
                    <div class="control-label" style="text-align: left">
                        <span>[[${myDevice.bujijingT42Now}]]</span>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4" style="text-align: left">样品仓设定值</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">真空度：</label>
                    <div class="col-sm-8">
                        <input name="dtailsDTO.p2Seting" th:value="*{dtailsDTO.p2Seting}"  class="form-control"  type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">舱体真空稳定时间：</label>
                    <div class="col-sm-8" >
                        <input name="dtailsDTO.cangtiC1Seting" th:value="*{dtailsDTO.cangtiC1Seting}"  class="form-control"  type="text" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">捕集阱温度：</label>
                    <div class="col-sm-8">
                        <input name="dtailsDTO.bujijingT3Seting" th:value="*{dtailsDTO.bujijingT3Seting}"  class="form-control"  type="text" required>

                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">捕集阱温度维持时间：</label>
                    <div class="col-sm-8">
                        <input name="dtailsDTO.BujijingC4Seting" th:value="*{dtailsDTO.BujijingC4Seting}"  class="form-control"  type="text" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">捕集阱前温度：</label>
                    <div class="col-sm-8">
                        <input name="dtailsDTO.bujijingT41Seting" th:value="*{dtailsDTO.bujijingT41Seting}"  class="form-control"  type="text" required>

                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">捕集阱富集时间：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <input name="dtailsDTO.bujijingC3Seting" th:value="*{dtailsDTO.bujijingC3Seting}"  class="form-control"  type="text" required>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">捕集阱后温度：</label>
                    <div class="col-sm-8">
                        <input name="dtailsDTO.bujijingT42Seting" th:value="*{dtailsDTO.bujijingT42Seting}"  class="form-control"  type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">升温速率：</label>
                    <div class="col-sm-8">
                        <input name="dtailsDTO.pt1Seting" th:value="*{dtailsDTO.pt1Seting}"  class="form-control"  type="text" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i></button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
        <div class="row" >
            <div class="col-sm-12" style="top: 15px">
                <div class="form-group">
                    <label class="col-sm-1 control-label ">样品名称：</label>
                    <div class="col-sm-4">
                        <input name="dtailsDTO.SampleName" id="sampleName" th:field="*{sampleName}" class="form-control"  type="text" >
                    </div>
                </div>

            </div>
        </div>
        <div class="row" >
            <div class="col-sm-12" style="top: 15px">
                <div class="form-group">
                    <label class="col-sm-1 control-label ">方案名称：</label>
                    <div class="col-sm-4">
                        <input name="dtailsDTO.planName" id="planName" th:field="*{planName}" class="form-control"  type="text" >
                    </div>
                    <div>
                        <button class="btn btn-sm btn-primary" id="submit"><i class="fa fa-check"></i>保存修改方案</button>
                        <button class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>新建方案</button>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" style="top: 15px">
                <div class="form-group">
                    <label class="col-sm-1 control-label is-required">选择方案：</label>
                    <div class="col-sm-4">
                        <select class='form-control' name="planId" onchange="changePlan(event)">
                            <option th:each="option : ${myDevice.myPlans}" th:value="${option.id}" th:text="${option.name}" th:selected="${option.id} == ${myDevice.planId}">
                            </option>
                        </select>
                    </div>
                    <div >
                        <button type="submit" class="btn btn-sm btn-primary" onclick="startSeparationMode()"><i class="fa fa-check"></i>开始基本流程</button>
                    </div>
                </div>
            </div>
        </div>
    <div class="row">
        <div class="col-sm-12" style="top: 15px">
            <div class="form-group">
                <div class="col-sm-12">
                    <a class="btn btn-info" onclick="startPort()" >
                        <i class="fa fa-plus"></i> 启动串口
                    </a>
                    <a class="btn btn-info" onclick="sendPortDatePlanId()" >
                        <i class="fa fa-plus"></i> 发送设置数据
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('pupm on')" >
                        <i class="fa fa-plus"></i> 开始抽真空
                    </a>
                    <a class="btn btn-warning" onclick="sendPortDate('pupm off')" >
                        <i class="fa fa-plus"></i> 停止抽真空
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('temp1 on')" >
                        <i class="fa fa-plus"></i> 启动样品仓1温控
                    </a>
                    <a class="btn btn-warning" onclick="sendPortDate('temp1 off')">
                        <i class="fa fa-plus"></i> 关闭样品仓1温控
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('temp2 on')" >
                        <i class="fa fa-plus"></i> 启动样品仓2温控
                    </a>
                    <a class="btn btn-warning" onclick="sendPortDate('temp2 off')" >
                        <i class="fa fa-plus"></i> 关闭样品仓2温控
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('val1 go1')" >
                        <i class="fa fa-plus"></i> 阀S1走到1位置
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('val1 go2')" >
                        <i class="fa fa-plus"></i> 阀S1走到2位置
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="top: 15px">
            <div class="form-group">
                <div class="col-sm-12">
                    <a class="btn btn-success" onclick="sendPortDate('temp3 on')" >
                        <i class="fa fa-plus"></i> 启动捕集阱温控
                    </a>
                    <a class="btn btn-warning" onclick="sendPortDate('temp3 off')" >
                        <i class="fa fa-plus"></i> 关闭捕集阱温控
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('temp4 on')" >
                        <i class="fa fa-plus"></i> 启动捕集阱前温控
                    </a>
                    <a class="btn btn-warning" onclick="sendPortDate('temp4 off')" >
                        <i class="fa fa-plus"></i> 关闭捕集阱前温控
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('temp5 on')" >
                        <i class="fa fa-plus"></i> 启动捕集阱后温控
                    </a>
                    <a class="btn btn-warning" onclick="sendPortDate('temp5 off')" >
                        <i class="fa fa-plus"></i> 关闭捕集阱后温控
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('e1 on')" >
                        <i class="fa fa-plus"></i> 启动阀E1
                    </a>
                    <a class="btn btn-warning" onclick="sendPortDate('e1 off')" >
                        <i class="fa fa-plus"></i> 关闭阀E1
                    </a>
                    <a class="btn btn-success" onclick="sendPortDate('e2 on')" >
                        <i class="fa fa-plus"></i> 启动阀E2
                    </a>
                    <a class="btn btn-warning" onclick="sendPortDate('e2 off')" >
                        <i class="fa fa-plus"></i> 关闭阀E2
                    </a>
                </div>
            </div>
        </div>
    </div>
    </form>


<!--    <div class="row">-->
<!--        <div class="col-sm-12">-->
<!--            <div class="form-group">-->

<!--                &lt;!&ndash;<div class="col-sm-4">-->
<!--                    <button type="button" class="btn btn-sm btn-primary" id="download" onclick="download()"><i class="fa fa-check"></i>下载</button>-->
<!--                </div>&ndash;&gt;-->
<!--                <form th:action="@{/system/device/downLoad}" method="get">-->
<!--                    <button class="btn btn-sm btn-primary" type="submit">下载文件</button>-->
<!--                </form>-->

<!--            </div>-->

<!--        </div>-->
<!--    </div>-->

<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />

<script th:src="@{/js/jquery.tmpl.js}"></script>
<script th:inline="javascript">
    translate.selectLanguageTag.show = false; //不出现的select的选择语言
    translate.service.use('client.edge'); //设置机器翻译服务通道
    translate.execute();
    var prefix = ctx + "system/device";
    var detail_prefix = ctx + "system/details";
    var myDevice = {};
    var myDeviceDetail = {};
    var runTime = "aa";
    var options = {};
    console.log("---------"+planName);
    $("#form-device-edit").validate({
        rules:{
            dictSort:{
                digits:true
            },
        },
        focusCleanup: true
    });
    var settingData = [
        {
            cangtiT1Seting:"",
            cangtiC2Seting:"",
        }];

    $(function() {

        queryDevice(0);
        // 初始化数据, 可以由后台传过来

         options = {
            data: settingData,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },


                {
                    field: 'cangtiT1Seting',
                    title: '舱体设定加热温度设定值',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control goodsName' type='text' name='settingDTOS[%s].cangtiT1Seting' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'cangtiC2Seting',
                    title: '舱体恒温烘烤时间设定值',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control goodsName' type='text' name='settingDTOS[%s].cangtiC2Seting' value='%s'>", index, value);
                        return html;
                    }
                }/*,

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }*/]
        };
        $.table.init(options);
    });

    function addRow() {
        var count = $("#" + table.options.id).bootstrapTable('getData').length;
        var row = {
            index: $.table.serialNumber(count),
            cangtiT1Seting:"",
            cangtiC2Seting:"",
        }
        sub.addRow(row);
    }

    function queryDevice(planId)
    {
        console.log("queryDevice==============================")
        planId = window.document.getElementById("planId").getAttribute("value");
        console.log(planId)
        $.ajax({
            cache : true,
            type : "GET",
            url : prefix + "/detail?planId="+planId,
            /*data : {
                "roleId": ""
            },*/
            async : false,
            /*error : function(request) {
                $.modal.alertError("系统错误");
            },*/
            success : function(data) {
                console.log(data);
                myDevice = data;
                console.log(data.sampleName);
                var planName = document.getElementById('planName');
                var sampleName = document.getElementById('sampleName');
                // 为该元素设置文本内容
                planName.value  = data.planName;
                sampleName.value  = data.sampleName;
                //myDeviceDetail = data.detailsList[0]
                settingData = data.settingDTOS
                //$.operate.successCallback(data);
            }
        });
    }
    function startSeparationMode(){
        console.log("startSeparationMode==============================")
        planId = window.document.getElementById("planId").getAttribute("value");
        $.ajax({
            cache : true,
            type : "POST",
            url : detail_prefix + "/startSeparationMode/"+planId,
            async : true,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.operate.successCallback(data);
            }
        });
    }

    //th:action="submitHandler()"

   function submitHandler(){
       var planId = document.getElementById('planId');
       planId.value = " ";
       const submitLgin=document.getElementById("submit");
       submitLgin.click();
       /*if ($.validate.form()) {
            //$.operate.save(prefix + "/edit", $('#form-device-edit').serialize());
            $.ajax({
                cache : true,
                type : "POST",
                url : prefix + "/submitADD",
                data : $('#form-device-edit').serialize(),
                dataType: "json",
                async : false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    $.operate.successCallback(data);
                }
            });
        }*/
    }

    function queryMyPlans(){
        $.ajax({
            cache : true,
            type : "GET",
            url : prefix + "/queryMyPlans",
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.operate.successCallback(data);
            }
        });
    }
    /*$(document).ready(function() {
        $('#planId').on('change', function(val) {debugger;
            //alert('下拉框被点击！'+val);
            console.log(val)
            // 这里可以添加更多的点击事件逻辑
        });
    });*/
    function changePlan(event){
        debugger;
        console.log("=======-=================="+event.target.value)
        window.document.getElementById("planId").setAttribute("value",event.target.value);
        var planId = document.getElementById('planId');
        if (planId == null && planId == undefined && planId == ""){
            window.document.getElementById("changeSel").setAttribute("value",1);
        }
        /*$.ajax({
            cache : true,
            type : "GET",
            url : prefix +"/reload?planId="+event.target.value,
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {debugger
                /!*queryDevice(event.target.value);
                loadData();*!/
                $.operate.successCallback(data);
            }
        });*/
        const submitLgin=document.getElementById("submit");
        submitLgin.click();
    }

    function loadData(){
        options = {
            data: settingData,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },


                {
                    field: 'cangtiT1Seting',
                    title: '舱体设定加热温度设定值',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control goodsName' type='text' name='settingDTOS[%s].cangtiT1Seting' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'cangtiC2Seting',
                    title: '舱体恒温烘烤时间设定值',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control goodsName' type='text' name='settingDTOS[%s].cangtiC2Seting' value='%s'>", index, value);
                        return html;
                    }
                }/*,

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }*/]
        };
        $.table.init(options);
    }

    /*function download(){
        $.ajax({
            cache : true,
            type : "GET",
            url : prefix + "/downLoad",
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                //$.operate.successCallback(data);
            }
        });
    }*/
    function sendPortDate(dat) {
        $.ajax({
            url: detail_prefix + "/sendPortDate/"+dat,
            type: "post",
            dataType: "json",
            success: function(data) {
                // 处理成功的响应
                if (data.code == 0) {
                    $.modal.alertSuccess(data.msg);
                } else {
                    $.modal.alertError(data.msg);
                }
                console.log(data);
            },
            error: function(error) {
                // 处理错误的响应
                console.log(error);
            }
        });
    }
    function sendPortDatePlanId() {
        var planId = document.getElementById('planId').value;
        $.ajax({
            url: detail_prefix + "/sendPortDatePlanId/"+planId,
            type: "post",
            dataType: "json",
            success: function(data) {
                // 处理成功的响应
                if (data.code == 0) {
                    $.modal.alertSuccess(data.msg);
                } else {
                    $.modal.alertError(data.msg);
                }
                console.log(data);
            },
            error: function(error) {
                // 处理错误的响应
                console.log(error);
            }
        });
    }
    function startPort() {
        $.ajax({
            url: detail_prefix + "/startPort",
            type: "post",
            dataType: "json",
            success: function(data) {
                // 处理成功的响应
                if (data.code == 0) {
                    $.modal.alertSuccess(data.msg);
                } else {
                    $.modal.alertError(data.msg);
                }
                console.log(data);
            },
            error: function(error) {
                // 处理错误的响应
                console.log(error);
            }
        });
    }
    translate.selectLanguageTag.show = false; //不出现的select的选择语言
    translate.service.use('client.edge'); //设置机器翻译服务通道
    translate.execute();
</script>

</body>
</html>